/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<view  class="user-mes" v-if="!optionIsGoup||orderInfo.pay_status!=0">
		        <view class="user-contact">
		        {{orderInfo.consignee}}{{'　　'}}{{orderInfo.mobile}}
		        </view>
		        <view class="location" v-if="orderInfo.prom_type!=5">
		            <view class="address">
						<block v-for="(item,index) in regions">
							{{item.name}}
						</block>
						{{orderInfo.address}}
					</view>
		            <view class="pos-icon"><image class="wh100" :src="imgUrl+'common/iconfont-shouhuodizhi.png'" /></view>
		        </view>
		        <view class="border-img"><image class="wh100" :src="imgUrl+'common/tt.png'" /></view>
		    </view>
		<view class="order-meg">
			<view class="order-state" >
				<view class="store-name ellipsis-1">
					<image class="store-logo" :src="imgUrl+'cart/carnew.png'" role="img"></image>
					{{storeInfo.store_name}}
				</view>
				<view class="state">{{orderInfo.order_status_detail}}</view>
			</view>
			<block v-for="(item,index) in orderInfo.order_goods">
				<view class="order-detail">
					<view class="goods-img">
						<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"
						 role="img"></image>
					</view>
					<navigator class="order-cont" open-type="redirect" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id" role="navigation">
						<view class="goods-name ellipsis-2">{{item.goods_name}}</view>
						<view class="goods-color ellipsis-1">{{item.spec_key_name}}</view>
					</navigator>
					<view class="order-num">
						<view class="goods-price">￥{{item.goods_price.toFixed(2)}}</view>
						<view class="goods-num">x{{item.goods_num}}</view>
					</view>
				</view>
			</block>
			
			<view class="order-operate">
				<button class="contact-us check-btn btn-share" open-type="share" v-if="optionIsGoup&&orderInfo.order_status!=3" role="button" aria-disabled="false">分享</button>
				<view @tap="checkTeam" class="contact-us check-btn" v-if="optionIsGoup&&orderInfo.order_status!=3">查看拼团详情</view>
				<view @tap="contactService" class="contact-us goods-btn">联系客服</view>
									
				<view @tap="cancelOrder" :hidden="!(orderInfo.is_able_cancel&&orderInfo.pay_status==0&&orderInfo.order_status==3)" class="cancel-order goods-btn" :data-id="orderInfo.order_sn">取消订单</view>
				 <navigator  class="cancel-order goods-btn" v-if="orderInfo.pay_status==1&&orderInfo.order_status==3" :url="'/pages/order/cancel_order_info/cancel_order_info?order_sn='+orderInfo.order_sn">取消进度</navigator>
				<navigator class="cancel-order goods-btn" :hidden="!(orderInfo.is_able_cancel&&orderInfo.pay_status==1&&orderInfo.order_status!=3)"  :url="'/pages/order/refund_order/refund_order?consignee='+orderInfo.consignee+'&mobile='+orderInfo.mobile+'&orderId='+orderInfo.order_id+'&order_sn='+orderInfo.order_sn"
				 role="navigation">取消订单</navigator>
			</view>
		</view>
		<view class="basic-information information">
			<view class="title">基本信息</view>
			<view class="item">
				<view>订单编号</view>
				<view>{{orderInfo.order_sn}}</view>
			</view>
			<view class="item">
				<view>下单时间</view>
				<view>{{orderInfo.addTime}}</view>
			</view>
			<view class="item" v-if="!optionIsGoup && orderInfo.prom_type!=5">
				<view>收货地址</view>
				<view class="delivery-address">
					<block v-for="(item,index) in regions">
						{{item.name}}
					</block>
					{{orderInfo.address}}
				</view>  
			</view>
			<view class="item" v-if="!optionIsGoup && orderInfo.prom_type!=5">
				<view>收货人</view>
				<view>  {{orderInfo.consignee}}{{'　　'}}{{orderInfo.mobile}}</view>  
			</view>
			<view class="item" v-if="orderInfo.prom_type!=5">
				<view>接收手机</view>
				<view>{{orderInfo.mobile}}</view>  
			</view>
			<view class="item">
				<view>支付方式</view>
				<view>{{orderInfo.pay_code!=""?orderInfo.pay_name:'无'}}</view>
			</view>
			<view class="item">
				<view>配送方式</view>
				<view>{{orderInfo.shipping_code!=""?orderInfo.shipping_name:'无'}}</view>
			</view>
			<view class="item">
				<view>买家留言</view>
				<view class="leave-word">{{orderInfo.user_note!=""?orderInfo.user_note:'无'}}</view>
			</view>
			<!-- <block wx:for="{{order.vrorder}}" wx:key="{{index}}">
				<view class="item">
					<view>电子兑换码</view>
					<view class="red">{{item.vr_code}}</view>  
				</view>
				<view class="item">
					<view>兑换码状态</view>
					<view wx:if="{{item.vr_state==1}}" class="red">已使用，使用时间{{item.vrUsertimeFormat}}</view>
					<view wx:elif="{{item.vr_state==2}}" class="red">已过期，有效期至{{item.vrIndateFormat}}</view>
					<view wx:elif="{{item.vr_state==0&&item.refund_lock<1}}"class="red">未使用，有效期至{{item.vrIndateFormat}}</view>  
					<view wx:elif="{{item.refund_lock>0}}" class="red">已取消，有效期至{{item.vrIndateFormat}}</view>  
				</view>
			</block> -->
		</view>
		<view class="price-information information" v-if="orderInfo">
			<view class="title">价格信息</view>
			<view class="item">
				<view>商品总价</view>
				<view>￥ {{orderInfo.goods_price.toFixed(2)}}元</view>
			</view>
			<view class="item">
				<view>运费</view>
				<view>￥ {{orderInfo.shipping_price.toFixed(2)}}元</view>
			</view>
			<view class="item">
				<view>优惠券</view>
				<view>- ￥ {{orderInfo.coupon_price.toFixed(2)}}元</view>
			</view>
			<view class="item">
				<view>积分</view>
				<view>- ￥ {{orderInfo.integral_money.toFixed(2)}}元</view>
			</view>
			<view class="item">
				<view>余额</view>
				<view>- ￥ {{orderInfo.user_money.toFixed(2)}}元</view>
			</view>
			<view class="item">
				<view>活动优惠</view>
				<view>- ￥ {{orderInfo.order_prom_amount.toFixed(2)}}元</view>
			</view>
			<view class="item">
				<view>实付金额</view>
				<view class="pay-amount">￥ {{orderInfo.order_amount.toFixed(2)}}元</view>
			</view>
		</view>
		<!-- 暂时取消 -->
		<!-- <view class="btn-wrap">
			<view @tap="jumpToCart4" v-if="orderInfo.is_able_pay" class="tips-btn" :data-id="orderInfo.order_sn">立即付款</view>
			<view class="tips-btn" v-if="!orderInfo.is_able_pay" >{{orderInfo.order_status_detail}}</view>
			<navigator @tap="confirmOrder" v-if="orderInfo.is_able_receive" :data-id="orderInfo.order_sn" class="tips-btn" role="navigation">收货确认</navigator>
			<navigator class="tips-btn" v-if="orderInfo.is_able_shipping" :url="'/pages/user/express/express?order_sn='+orderInfo.order_sn" role="navigation">查看物流</navigator>
		</view> -->
	</view>
</template>

<script>
	import {
		getOrderInfo,
		getStore,
		putCancelOrder,
		getTheGoods,
		getTreamFoundInfo,
		getTreamActive,
		getAddressOne,
		getAddress,
		
		getOrderGoodsList
	} from "@/api/api.js";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				orderInfo:"",
				optionIsGoup: false, //是否是拼团
				 storeId:"",//店铺id
				storeInfo:"",//店铺信息
				found:"",//拼主信息
				treamActive:"",
				regions:"",
				goods_id:"",
				country:"",//国家id
				province:"",//省id
				city:"",//市id
				district:"",//区id
				twon:"",//街道 id
			};
		},
		onLoad(options){
			var isGroup=options.isGroup?options.isGroup:false;

			this.optionIsGoup=isGroup;
			console.log(options)
			let params={
				"order_sn":options.order_sn
			}
			this.getOrderInfo(params)
		},
		computed: {
			...mapState(['imgType','goodsImgHeight','goodsImgWidth'])
		},
		methods:{
			/*订单信息*/
			getOrderInfo(params){
				getOrderInfo(params).then(res=>{
					var that=this;
					console.log(res)
					if(res){
						that.orderInfo=res
						that.orderInfo.addTime=common.format(res.add_time)
						/*店铺信息*/
						that.getStore(res.store_id)
						
						if(res.prom_type==6){
							let params={
								order_id:res.order_id
							}
							that.getTreamFoundInfo(params)
						}
						this.country=res.country;
						this.province=res.province;
						this.city=res.city;
						this.district=res.district;
						if(res.twon){
							this.twon=res.twon;
						}
						
						
					}
					let addressId=res.country
					this.getAddress(addressId)
					return res.order_id
				}).then(orderId=>{
					let goods= new Array()
					getOrderGoodsList({order_id:orderId}).then(res=>{
						console.log(res)
						goods=res
						this.orderInfo.order_goods=goods
						console.log(this.orderInfo)
					})

				})
			},
			// 用户地址
			getAddress(params){
				let regions=[];
				getAddress(params).then(res=>{
					console.log(res)
					if(res.length>0){
						res.map(item=>{
							if(this.province==item.id){
								 regions.push(item)
							}
						})
					}
				}).then(res=>{ //省
					let addressId=this.province
					getAddress(addressId).then(res=>{
						if(res.length>0){
							res.map(item=>{
								if(this.city==item.id){
									regions.push(item)
								}
							})
						}
					})
				}).then(res=>{ //市
					let addressId=this.city
					getAddress(addressId).then(res=>{
						if(res.length>0){
							res.map(item=>{
								if(this.district==item.id){
									regions.push(item)
								}
							})
						}
					})
				}).then(res=>{ //区
					let addressId=this.district;
					getAddress(addressId).then(res=>{
						if(res.length>0){
							res.map(item=>{
								if(this.twon==item.id){
									console.log(item)
									// regions.push(item)
								}
							})
						}
					})
				}).then(res=>{ //街道
					if(this.twon){
						let addressId=this.twon;
						getAddress(addressId).then(res=>{
							console.log(res)
						})
					}
					
				}).then(res=>{
					if(regions.length>0){
						this.regions=regions;
					}
					
				})
				
			},
			/*拼主信息*/
			getTreamFoundInfo(params){
				getTreamFoundInfo(params).then(res=>{
					if(res){
						this.found=res
						this.getTreamActive(res.team_id)
						// this.countdown()
						// this.getTreamList(this.params)
					}
					console.log(res)
				})
			},
			/*拼团主体信息*/
			getTreamActive(params) {
				getTreamActive(params).then(res => {
					if (res) {
						this.treamActive = res
						this.goods_id = res.goods_id;
					}
					console.log(res)
			
				})
			},
			/*店铺信息*/
			getStore(id){
				getStore(id).then(res=>{
					if(res){
						this.storeInfo=res
						
						
						// console.log(this.storeInfo)
					}
					// console.log(res)
				})
			},	
			/*联系客服*/
			contactService(){
				if(this.storeInfo.service_phone){
					uni.showModal({
					    title: `请联系客服:${this.storeInfo.service_phone}`,
					   showCancel:false,
					});

				}else{
					common.toast("none","没有联系方式",2000)
				}
			},
			/*删除订单*/
			cancelOrder(e){
				console.log(e)
				let order_sn=e.currentTarget.dataset.id
				let params={
					order_sn:order_sn
				}
				this.putCancelOrder(params)
			},
			/*立即付款*/
			jumpToCart4(e){
				if(this.optionIsGoup){
					
				}else{
					let order_sn=e.currentTarget.dataset.id
					uni.navigateTo({
						url:`/pages/cart/cart4/cart4?order_sn=${order_sn}`
					})
				}
			},
			/*取消订单*/
			putCancelOrder(params){
				putCancelOrder(params).then(res=>{
					if(res.msg==1){
						// common.toast("none","取消成功",2000)
						this.getOrderPage(this.params)
					}
					console.log(res)
				})
			},
			/*查看拼团详情*/
			checkTeam(){
				uni.navigateTo({
					url:`/pages/team/team_detail/team_detail?foundId=${this.found.found_id}`
				})
			},
			/*分享*/
			onShareAppMessage(res) {
				let that = this;
				let title = that.treamActive.share_title;
				let img = that.hostUrl + '/mall/goods/thumb_image?goods_id=' + that.treamActive.goods_id + '&width=400&height=400';
				let path = '/pages/team/team_detail/team_detail?foundId=' + that.found.found_id;
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: title,
					img: img,
					path: path
				}
			},
			
			
			/*确认收货*/
			confirmOrder(e){
				let order_sn=e.currentTarget.dataset.id
				let params={
					order_sn:order_sn
				}
				this.getTheGoods(params)
			},
			getTheGoods(params){
				getTheGoods(params).then(res=>{
					console.log(res)
					if(res.status==1){
						common.toast("none","收货成功",3000)
						this.getOrderPage(this.params)
					}else{
						common.toast("none",res.msg,3000)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.user-mes {
		background-color: #fff;
		font-size: 32rpx;
		color: #333;
	}

	.user-contact {
		padding: 24rpx 80rpx;
	}

	.location {
		position: relative;
		padding: 0 80rpx 24rpx;
	}

	.pos-icon {
		position: absolute;
		left: 30rpx;
		top: 0;
		width: 32rpx;
		height: 32.5rpx;
	}

	.border-img {
		width: 100%;
		height: 16rpx;
	}

	.order-meg {
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.order-state {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 40rpx;
		background-color: #fff;
	}

	.store-name {
		float: left;
		width: 480rpx;
	}

	.store-logo {
		height: 30rpx;
		width: 30rpx;
		margin-right: 10rpx;
	}

	.order-state>.state {
		color: #ff3b3b;
		float: right;
	}

	.order-detail {
		padding: 30rpx 0;
		border-bottom: 1px solid #f3f3f3;
		color: #666;
		min-height: 100rpx;
	}

	.goods-img {
		float: left;
		width: 100rpx;
		height: 100rpx;
		margin: 0 30rpx;
	}

	.order-cont {
		float: left;
		width: 440rpx;
	}

	.goods-name {
		height: 60rpx;
		line-height: 30rpx;
		overflow: hidden;
		margin-bottom: 16rpx;
	}

	.goods-color {
		font-size: 24rpx;
	}

	.order-num {
		float: right;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-right: 20rpx;
		text-align: right;
		line-height: 42rpx;
	}

	.order-operate {
		height: 100rpx;
		padding-right: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.check-btn {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-right: 10rpx;
		border: 1px solid #f3f3f3;
	}

	.btn-share::after {
		border: 0
	}

	.goods-btn {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1px solid #f3f3f3;
	}

	.cancel-order {
		margin-left: 20rpx;
	}

	.information {
		padding: 0 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.information .title {
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #f3f3f3;
		font-size: 30rpx;
		color: #333;
	}

	.information .item {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #666;
	}

	.delivery-address,
	.leave-word {
		width: 500rpx;
		text-align: right;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.pay-amount {
		color: #ff3b3b;
	}

	.btn-wrap {
		height: 100rpx;
		background-color: #fff;
		text-align: right;
	}

	.tips-btn {
		display: inline-block;
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background-color: #ff3b3b;
		margin-left: 2rpx;
	}

	.red {
		color: #ff3b3b;
	}
</style>
